<template>
	<div id="manage">
		<el-container >
			<el-header>
				<el-input placeholder="请输入用户名"></el-input>
				<el-input placeholder="请输入手机号"></el-input>
				<el-button type="primary" icon="el-icon-search">查找</el-button>
				<el-button type="primary" icon="el-icon-download">导出</el-button>
			</el-header>
			<el-main>
				<el-table :data="tableData" border stripe style="width: 100%">
					<el-table-column prop="uid" sortable label="用户ID" width="180"></el-table-column>
					<el-table-column prop="name" label="用户名" width="180"></el-table-column>
					<el-table-column prop="phone" label="手机号码"></el-table-column>
					<el-table-column prop="Gender" label="性别"></el-table-column>
					<el-table-column prop="birthday" label="生日"></el-table-column>
					<el-table-column prop="Grade" label="用户等级"></el-table-column>
					<el-table-column prop="stust" label="状态"></el-table-column>
				</el-table>
			</el-main>
			<el-footer>
				<el-pagination :page-sizes="[10, 20, 30, 40,50,100]" :page-size="10"
					layout="total, sizes, prev, pager, next, jumper" :total="1">
				</el-pagination>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
					uid: '1',
					name: 'user123',
					phone: '1383838438',
					Gender: "男",
					birthday: '',
					Grade: "普通用户",
					stust: "可用"
				}]
			}
		}
	}
</script>

<style>
	#manage {
		width: 100%;
	}

	#manage .el-header {
		line-height: 80px;
		height: 80px !important;
		border-bottom: 0px;
	}

	#manage .el-header .el-input {
		width: 200px;
		margin-right: 10px;
	}

	#manage .el-header .el-button {
		margin-top: 19px;
		height: 40px;
	}

	#manage .el-main {
		padding: 5px 20px;
		height: 200px;
	}

	#manage .el-table__body tr .cell {
		text-align: center;
	}

	#manage .has-gutter tr th {
		text-align: center;
	}

	#manage .el-footer {
		border-bottom: 0px;
	}
</style>
